<template>
	<view class="header">
		<!-- 轮播图 -->
		<swiper class="swiper" :autoplay="false" :interval="3000" :duration="1000" :current="swiperCurrent"
		:style="{height:`${swiperHeight}rpx`}"
			@change="changeSwiper">
			<swiper-item v-for="item in swiperImg" :key="item.id">
				<image class="swiper-item" :src="`${imageUrl}${item}`" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 返回键 -->
		<view v-if="porps.backShow" class="back" @click="toback"
		:style="{top:`${(capsuleHeight - capsuleButton) / 2 + TimeBarHeight}px`,height:capsuleButton + 'px',width:capsuleButton + 'px'}">

			<image src="../static/product-cwr/Path.png" mode=""></image>
		</view>
		<!-- 轮播指示点样式修改 -->
		<view class="dots" >
			<block v-for="(item,index) in swiperImg.length" :key="item">
				<view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
			</block>
		</view>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	import {TimeBarHeight,capsuleHeight,capsuleButton} from '@/config/systemInfo.js'
	import {imageUrl} from '@/config/request/request.js'
	const current = ref(0)
	const swiperCurrent = ref(0)
	const porps = defineProps({
		backShow: {
			type: Boolean,
			default: false
		},
		swiperImg: {
			type: Array,
			default: []
		},
		swiperHeight:{
			type:Number,
			default:0
		}
	})
	const changeSwiper = (e) => {
		console.log(e);
		swiperCurrent.value = e.detail.current
	}
	const toback = () =>{
		console.log('换覅u');
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style>
	.header {
		width: 100%;
		position: relative;
	}
	.swiper {
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.dots {
		position: absolute;
		bottom: 30rpx;
		left: 50%;
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		z-index: 5;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.dot {
		border-radius: 10rpx;
		width: 16rpx;
		height: 16rpx;
		transition: all .6s;
		background: rgba(0, 0, 0, .3);
		margin-right: 10rpx;
	}

	.active {
		border-radius: 10rpx;
		width: 60rpx;
		height: 10rpx;
		background: rgba(255, 255, 255, .8);
	}

	.back {
		position: absolute;
		left: 25rpx;
		width: 48rpx;
		height: 48rpx;
		background-color: rgba(0, 0, 0, .3);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.back image {
		width: 24rpx;
		height: 32rpx;
	}
</style>